<template>
  <PageWrapper contentClass="flex" contentFullHeight dense fixedHeight>
    <a-card>
      <div style="margin-bottom: 20px">
        <a-form :model="formState">
          <a-row :gutter="[20, 20]">
            <a-col v-if="activeKey == 1" :xs="24" :sm="6">
              <a-form-item :label="t('sys.login.userName')">
                <a-input
                  allowClear
                  :placeholder="t('sys.login.userName')"
                  v-model:value="formState.account"
                />
              </a-form-item>
            </a-col>
            <a-col v-if="activeKey == 2" :xs="24" :sm="6">
              <a-form-item :label="t('sys.account.facebookAccout')">
                <a-input
                  allowClear
                  :placeholder="t('sys.account.facebookAccout')"
                  v-model:value="formState.facebookName"
                />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="6">
              <a-form-item :label="t('sys.account.columns.status')">
                <a-select
                  :placeholder="t('sys.account.columns.status')"
                  allowClear
                  v-model:value="formState.status"
                >
                  <a-select-option :value="0">{{ t('sys.configuration.blockUp') }}</a-select-option>
                  <a-select-option :value="1">{{
                    t('sys.configuration.startUsing')
                  }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
<!--                 <a-col :xs="24" :sm="6">-->
<!--              <a-form-item :label="t('sys.code.columns.accountStatus')">-->
<!--                <a-select-->
<!--                  :placeholder="t('sys.code.columns.accountStatus')"-->
<!--                  allowClear-->
<!--                  v-model:value="formState.bindStatus"-->
<!--                >-->
<!--                  <a-select-option :value="0">{{ t('sys.code.columns.notBound') }}</a-select-option>-->
<!--                  <a-select-option :value="1">{{ t('sys.code.columns.boundAlready') }}</a-select-option>-->
<!--                </a-select>-->
<!--              </a-form-item>-->
<!--            </a-col>-->
            <a-col :xs="24" :sm="6">
              <a-space>
                <a-button @click="Reactinquire" :icon="h(SearchOutlined)" type="primary">
                  {{ t('sys.form.placeholder.inquire') }}
                </a-button>
                <a-button
                  v-if="activeKey == 1"
                  @click="Addinquire"
                  :icon="h(PlusOutlined)"
                  type="primary"
                >
                  {{ t('sys.account.addAccount') }}
                </a-button>
                <!-- <a-button
                  v-if="activeKey == 2"
                  @click="AddPerconfig"
                  :icon="h(PlusOutlined)"
                  type="primary"
                >
                  {{ t('sys.account.addAccountdeploy') }}
                </a-button> -->
              </a-space>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-tabs @change="activeKeyChange" v-model:activeKey="activeKey">
        <a-tab-pane key="1" :tab="t('sys.analysis.every')" />
        <a-tab-pane key="2" :tab="t('sys.account.business')" />
        <!-- <a-tab-pane key="3" :tab="t('sys.account.facebook')" />
        <a-tab-pane key="4" :tab="t('sys.account.plugin')" /> -->
      </a-tabs>
      <a-table
        @change="handleTableChange"
        :pagination="pagination"
        :loading="loading"
        bordered
        :scroll="{ x: 2000 }"
        rowKey="id"
        :columns="columns"
        :showExpandColumn="false"
        :dataSource="dataSource"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'status'">
            <a-tag v-if="record.status == 0" color="orange">
              {{ t('sys.configuration.blockUp') }}
            </a-tag>
            <a-tag v-if="record.status == 1" color="green">
              {{ t('sys.configuration.startUsing') }}
            </a-tag>
          </template>
           <template v-if="column.dataIndex === 'bindStatus'">
            <a-tag v-if="record.bindStatus == 0" color="orange">
              {{ t('sys.code.columns.notBound') }}
            </a-tag>
            <a-tag v-if="record.bindStatus == 1" color="blue">
              {{ t('sys.code.columns.boundAlready') }}
            </a-tag>
          </template>

          <template v-if="column.dataIndex === 'operation'">
            <a-space>
              <a-button v-if="activeKey == 1" @click="drawerEditBoxClick(record)" type="link">
                {{ t('sys.configuration.edit') }}
              </a-button>
              <a-button
                v-if="activeKey == 2 && record.status == 0"
                @click="drawerstatusClick(record, 1)"
                type="link"
              >
                {{ t('sys.configuration.blockUp') }}
              </a-button>

              <a-button
                v-if="activeKey == 2 && record.status == 1"
                @click="drawerstatusClick(record, 0)"
                type="link"
              >
                {{ t('sys.configuration.startUsing') }}
              </a-button>
              <!-- <a-button v-if="activeKey == 2" @click="AddPerconfig" type="link">
                {{ t('sys.configuration.configuration') }}
              </a-button> -->

              <a-button v-if="activeKey == 1" @click="drawerlogShowClick(record)" type="link">
                {{ t('sys.configuration.log') }}
              </a-button>
              <a-popconfirm
                @confirm="deleteClick(record)"
                :title="t('sys.configuration.IsDelete')"
                :ok-text="t('sys.configuration.comfig')"
                :cancel-text="t('sys.configuration.cancel')"
              >
                <a-button v-if="activeKey == 1" danger type="link">
                  {{ t('sys.configuration.delete') }}</a-button
                >
              </a-popconfirm>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-card>
    <a-drawer
      v-model:open="DrawerDetalsShow"
      class="custom-class"
      root-class-name="root-class-name"
      :title="addformState.id == null ? t('sys.account.addAccount') : t('sys.account.editAccount')"
      placement="right"
    >
      <a-form :label-col="{ span: 6 }" :model="addformState">
        <a-form-item :label="t('sys.login.userName')">
          <a-input
            allowClear
            :placeholder="t('sys.configuration.pleaseenter') + t('sys.login.userName')"
            v-model:value="addformState.account"
          />
        </a-form-item>
        <a-form-item :label="t('sys.account.columns.password')">
          <a-input
            allowClear
            :placeholder="t('sys.configuration.pleaseenter') + t('sys.account.columns.password')"
            v-model:value="addformState.password"
          />
        </a-form-item>
        <a-form-item label="cookies">
          <a-input
            allowClear
            :placeholder="t('sys.configuration.pleaseenter') + 'cookies'"
            v-model:value="addformState.cookes"
          />
        </a-form-item>
        <a-form-item :label="t('sys.errorLog.tableColumnType')">
          <a-select
            :placeholder="t('sys.configuration.pleasechoose') + t('sys.errorLog.tableColumnType')"
            v-model:value="addformState.accountType"
          >
            <a-select-option :value="1"
              >{{ t('sys.analysis.every') }}{{ t('sys.login.userName') }}</a-select-option
            >
            <!-- <a-select-option :value="2"
              >{{ t('sys.account.business') }}{{ t('sys.login.userName') }}</a-select-option
            >
            <a-select-option :value="3">{{ t('sys.account.facebook') }}</a-select-option>
            <a-select-option :value="4"
              >{{ t('sys.account.plugin') }}{{ t('sys.login.userName') }}</a-select-option
            > -->
          </a-select>
        </a-form-item>
        <a-form-item :label="t('sys.account.columns.status')">
          <a-select
            :placeholder="t('sys.form.placeholder.status')"
            v-model:value="addformState.status"
          >
            <a-select-option :value="0">{{ t('sys.configuration.blockUp') }}</a-select-option>
            <a-select-option :value="1">{{ t('sys.configuration.startUsing') }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
      <a-divider />
      <div style="display: flex; justify-content: flex-end">
        <a-button @click="ADDcomfig" type="primary" size="small">
          {{ t('sys.configuration.comfig') }}
        </a-button>
      </div>
    </a-drawer>
    <a-modal
      width="30%"
      v-model:open="AddPerconfigShow"
      :title="t('sys.account.addAccountdeploy')"
      @ok="logShow = false"
    >
      <a-form :layout="'vertical'" :model="formAddConfig">
        <a-form-item :label="t('sys.account.form.addnumber')">
          <a-input v-model:value="formAddConfig.number" />
        </a-form-item>
        <a-form-item :label="t('sys.account.form.addpeople')">
          <a-input v-model:value="formAddConfig.people" />
        </a-form-item>
        <a-form-item :label="t('sys.account.form.scriptreported')">
          <a-radio-group v-model:value="formAddConfig.resource">
            <a-radio value="1">{{ t('sys.account.form.Automaticactivation') }}</a-radio>
            <a-radio value="2">{{ t('sys.account.form.Manuallyenable') }}</a-radio>
            <a-radio value="3">{{ t('sys.configuration.blockUp') }}</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item v-if="formAddConfig.resource == 1" :label="t('sys.account.form.invokeTime')">
          <a-input v-model:value="formAddConfig.invokeTime" />
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal
      width="50%"
      v-model:open="logShow"
      :title="t('sys.configuration.log')"
      @ok="logShow = false"
    >
      <a-tabs v-model:activeKey="activeKey1">
        <a-tab-pane key="1" :tab="t('sys.configuration.courseLog')">
          <a-table
            :loading="tasklogLoading"
            :pagination="logpagination"
            @change="loghandleTableChange"
            :columns="processLogColumns"
            :dataSource="taskLogdataSource"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex == 'type'">
                <a-tag color="blue"> {{ t('sys.configuration.courseLog') }} </a-tag>
              </template>
              <template v-if="column.dataIndex == 'info'">
                {{ t('sys.configuration.info') }}'Mac :'{{ record.deviceMac
                }}{{ ',' + t('sys.script.columns.deiveName') }}{{ record.deviceNode }}
              </template>
            </template>
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </a-modal>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { onMounted, ref, h } from 'vue';
  import {
    deleteAcciybt,
    postAcciybtSave,
    postAcciybtListPage,
    postAcciybtUpdate,
    postfacebookUpdate,
    postfacebookPage,
    postaccountlog,
  } from '@/api/demo/device';
  import { message } from 'ant-design-vue';
  import { SearchOutlined, PlusOutlined } from '@ant-design/icons-vue';
  import { useI18n } from '@/hooks/web/useI18n';

  const { t } = useI18n();
  const AddPerconfigShow = ref(false);
  const AddPerconfig = () => {
    AddPerconfigShow.value = true;
  };
  const ADDcomfig = () => {
    if (addformState.value.id != null) {
      postAcciybtUpdate(addformState.value).then((res) => {
        if (res.code == 200) {
          message.success(t('sys.api.operationSuccess'));
          init();
          addformState.value = {};
          DrawerDetalsShow.value = false;
        }
      });
    } else {
      postAcciybtSave(addformState.value).then((res) => {
        if (res.code == 200) {
          message.success(t('sys.api.operationSuccess'));
          init();
          addformState.value = {};
          DrawerDetalsShow.value = false;
        }
      });
    }
  };
  const formAddConfig = ref({});
  const deleteClick = (record) => {
    deleteAcciybt(record.id).then((res) => {
      if (res.code == 200) {
        message.success(t('sys.api.operationSuccess'));
        init();
      }
    });
  };
  const processLogColumns = [
    { title: 'ID', dataIndex: 'id', key: 'id' },
    { title: t('sys.device.columns.time'), dataIndex: 'createTime', key: 'createTime' },
    { title: t('sys.analysis.columns.type'), dataIndex: 'type', key: 'type' },
    { title: t('sys.configuration.log'), dataIndex: 'info', key: 'info' },
  ];
  const taskLogdataSource = ref([
    {
      id: 1,
      nodeTime: '2025-6-5',
      type: 1,
      info: '该用户分配给设备1,进行任务采集',
    },
  ]);
  const tasklogLoading = ref(false);
  const logShow = ref(false);
  const dataSource = ref([]);
  const formState = ref({});
  const addformState = ref({});
  const activeKey = ref('1');
  const activeKey1 = ref('1');
  const Reactinquire = () => {
    pagination.value.current = 1;
    init();
  };
  const columns = ref([
    {
      title: 'id',
      dataIndex: 'id',
      sorter: true,
      width: 120,
    },
    {
      title: t('sys.login.userName'),
      dataIndex: 'account',
      width: 120,
    },
    {
      title: t('sys.account.columns.password'),
      dataIndex: 'password',
      width: 120,
    },

    {
      title: 'cookies',
      dataIndex: 'cookes',
    },
         {
      title: t('sys.code.columns.accountStatus'),
      dataIndex: 'bindStatus',
      width: 120,
    },
    {
      title: t('sys.account.columns.status'),
      dataIndex: 'status',
      width: 120,
    },
    {
      title: t('sys.informaionMatchaing.columns.updateTime'),
      dataIndex: 'updateTime',
      sorter: true,
      width: 200,
    },
    {
      title: t('sys.informaionMatchaing.columns.updateTime1'),
      dataIndex: 'distributeTime',
      sorter: true,
      width: 200,
    },
    {
      title: t('sys.configuration.action'),
      dataIndex: 'operation',
      key: 'operation',
      width: 80,
    },
  ]);
  const logaccountId = ref(null);
  const drawerlogShowClick = (record) => {
    logShow.value = true;
    logaccountId.value = record.id;
    logpagination.value.current = 1;
    logPage();
  };
  const logpagination = ref({
    total: 0,
    current: 1,
    pageSize: 10,
  });
  const logPage = () => {
    postaccountlog({
      accountId: logaccountId.value,
      current: logpagination.value.current,
      size: logpagination.value.pageSize,
    }).then((res) => {
      if (res.code == 200) {
        taskLogdataSource.value = res.data.records;
        logpagination.value.total = res.data.total;
      }
    });
  };
  const loading = ref(false);
  const DrawerDetalsShow = ref(false);
  const Addinquire = () => {
    DrawerDetalsShow.value = true;
  };
  const pagination = ref({
    total: 0,
    current: 1,
    pageSize: 10,
  });

  const drawerEditBoxClick = (record) => {
    DrawerDetalsShow.value = true;
    addformState.value = record;
    // selectValue.value = record.state;
    // getPersonalInfo(record.taskId).then((res) => {
    //   if (res.code == 200) {
    //     formDetails.value = res.data;
    //
    //   }
    // });
  };
  const drawerstatusClick = (record, it) => {
    postfacebookUpdate({ id: record.id, status: it }).then((res) => {
      if (res.code == 200) {
        message.success(t('sys.api.operationSuccess'));
        init();
      }
    });
  };
  const handleTableChange = (e: { pageSize: number; current: number }, filters, sorter: any) => {
    formState.value.sortName = sorter.field;
    formState.value.sortType = sorter.order;
    pagination.value = e;
    init();
  };
  const loghandleTableChange = (e) => {
    logpagination.value = e;
    logPage();
  };
  const init = () => {
    loading.value = true;
    if (activeKey.value == 1) {
      postAcciybtListPage({
        size: pagination.value.pageSize,
        current: pagination.value.current,
        accountType: activeKey.value,
        ...formState.value,
      }).then((res) => {
        if (res.code == 200) {
          dataSource.value = res.data.records;
          pagination.value.total = res.data.total;
          loading.value = false;
        }
      });
    } else {
      postfacebookPage({
        size: pagination.value.pageSize,
        current: pagination.value.current,
        uid: localStorage.getItem('id'),
        ...formState.value,
      }).then((res) => {
        if (res.code == 200) {
          dataSource.value = res.data.records;
          pagination.value.total = res.data.total;
          loading.value = false;
        }
      });
    }
  };
  onMounted(() => {
    init();
  });
  const activeKeyChange = (e) => {
    activeKey.value = e;
    if (e == 1) {
      columns.value = [
        {
          title: 'id',
          dataIndex: 'id',
          sorter: true,
          width: 120,
        },
        {
          title: t('sys.login.userName'),
          dataIndex: 'account',
          width: 120,
        },
        {
          title: t('sys.account.columns.password'),
          dataIndex: 'password',
          width: 120,
        },
        {
          title: 'cookies',
          dataIndex: 'cookes',
        },
        {
          title: t('sys.account.columns.status'),
          dataIndex: 'status',
          width: 120,
        },
        {
          title: t('sys.informaionMatchaing.columns.updateTime'),
          dataIndex: 'updateTime',
          sorter: true,
          width: 200,
        },
        {
          title: t('sys.informaionMatchaing.columns.updateTime1'),
          dataIndex: 'distributeTime',
          sorter: true,
          width: 200,
        },
        {
          title: t('sys.configuration.action'),
          dataIndex: 'operation',
          key: 'operation',
          width: 80,
        },
      ];
      init();
    } else {
      columns.value = [
        {
          title: 'id',
          dataIndex: 'id',
          sorter: true,
          width: 120,
        },
        {
          title: t('sys.account.facebook'),
          dataIndex: 'uname',
          width: 120,
        },
        {
          title: t('sys.account.facebookAccout'),
          dataIndex: 'facebookName',
          width: 120,
        },
        {
          title: t('sys.account.columns.password'),
          dataIndex: 'facebookPassword',
          width: 120,
        },
        {
          title: t('sys.account.columns.status'),
          dataIndex: 'status',
          width: 120,
        },
        // {
        //   title: t('sys.userlist.columns.createTime'),
        //   dataIndex: 'status',
        //   width: 120,
        // },
        // {
        //   title: t('sys.account.columns.addNUM'),
        //   dataIndex: 'status',
        //   width: 120,
        // },
        // {
        //   title: t('sys.account.columns.AbnormalityAlert'),
        //   dataIndex: 'status',
        //   width: 120,
        // },
        {
          title: t('sys.informaionMatchaing.columns.updateTime'),
          dataIndex: 'updateTime',
          sorter: true,
          width: 200,
        },
        {
          title: t('sys.informaionMatchaing.columns.updateTime1'),
          dataIndex: 'distributeTime',
          sorter: true,
          width: 200,
        },
        {
          title: t('sys.configuration.action'),
          dataIndex: 'operation',
          key: 'operation',
          width: 80,
        },
      ];
      init();
    }
  };
</script>
<style scoped lang="less"></style>
